<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="
    width=750,target-densitydpi=device-dpi,maximum-scale=1.0,
     user-scalable=no">
    <script type="text/javascript">
        function setWidth(e) {
            if (/Andriod/i.test(navigator.userAgent)) {
                var f, d = window.innerWidth; (d != e) && (f = d / e),
                    document.addEventListener("DOMContentLoaded",
                        function () {
                            var a = document.getElementsByTagName
                                ("body")[0]; a.style.webkitTransformOrigin = "left top";
                            a.style.webkitTransform = "scale(" + f + ")"
                        }, !1)
            }
        } setWidth(750);
    </script>
    <title>搜索 - 乐购</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/search.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <style>
        .swiper-pagination-fraction {
            bottom: 10px;
            right: 20px;
            width: auto;
            font-size: .52rem;
            padding: 2px 10px;
            border-radius: 20px;
            color: #fff;
            background: rgba(0, 0, 0, .3);
            left: auto;
        }
        

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 12px 4px;
    width: 15px;
    height: 15px;
}
    </style>
</head>

<body>
    <!-- 最大的容器 -->
    <div class="container">
        <header>
            <!-- 头部 -->
            <div class="header">
                <img class="logo-right" src="images/logo.png" alt="">
                <!-- search 搜索 -->
                <div class="search">
                    <i class="icon fl">&#xe6cf;</i>
                    <input type="text" placeholder="输入商家、分类或商圈">
                </div>
                <i class="icon saoma">&#xe622;</i>
            </div>
        </header>

        <section>

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="content">
                            <div class="ktv">
                                <p class="d1">热门搜索</p>
                                <p class="d2">其美烤肉自助火锅城</p>
                                <p class="d3">新聚点量版ktv</p>
                            </div>
                            <div class="line"></div>
                            <div class="d4">
                                <p class="d5">新聚点量版ktv</p>
                                <p class="d6">新聚点量版ktv</p>
                            </div>
                            <div class="line"></div>
                            <div class="d4">
                                <p class="d5">新聚点量版ktv</p>
                            </div>
                            <div class="line"></div>
                            <!-- <div class="dd">
                                    <div class="d6 d7"></div>
                                    <div class="d6"></div>
                                    <div class="d6"></div>
                                </div> -->
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="content">
                            <div class="ktv">
                                <p class="d1">热门搜索</p>
                                <p class="d2">其美烤肉自助火锅城</p>
                                <p class="d3">新聚点量版ktv</p>
                            </div>
                            <div class="line"></div>
                            <div class="d4">
                                <p class="d5">新聚点量版ktv</p>
                                <p class="d6">新聚点量版ktv</p>
                            </div>
                            <div class="line"></div>
                            <div class="d4">
                                <p class="d5">新聚点量版ktv</p>
                            </div>
                            <div class="line"></div>
                            <!-- <div class="dd">
                                    <div class="d6 d7"></div>
                                    <div class="d6"></div>
                                    <div class="d6"></div>
                                </div> -->
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="content">
                            <div class="ktv">
                                <p class="d1">热门搜索</p>
                                <p class="d2">其美烤肉自助火锅城</p>
                                <p class="d3">新聚点量版ktv</p>
                            </div>
                            <div class="line"></div>
                            <div class="d4">
                                <p class="d5">新聚点量版ktv</p>
                                <p class="d6">新聚点量版ktv</p>
                            </div>
                            <div class="line"></div>
                            <div class="d4">
                                <p class="d5">新聚点量版ktv</p>
                            </div>
                            <div class="line"></div>
                            <!-- <div class="dd">
                                    <div class="d6 d7"></div>
                                    <div class="d6"></div>
                                    <div class="d6"></div>
                                </div> -->
                        </div>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                <!-- Add Arrows -->
                <!-- <div class="swiper-button-next"></div> -->
                <!-- <div class="swiper-button-prev"></div> -->
            </div>
            <div class="lt">
                <i class="fl">&#xe61d;</i>
                <p>联通流量充值</p>
            </div>
            <div class="lt">
                <i class="fl">&#xe61d;</i>
                <p>联通流量充值</p>
            </div>
            <div class="lt">
                <i class="fl">&#xe61d;</i>
                <p>联通流量充值</p>
            </div>
            <div class="lt">
                <i class="fl">&#xe61d;</i>
                <p>联通流量充值</p>
            </div>
            <div class="lt">
                <i class="fl ss">&#xe635;</i>
                <p class="cq">清除历史记录</p>
            </div>
        </section>
    </div>

    <script src="js/swiper.min.js"></script>
    <script>
        // 广告图
        var swiper = new Swiper('.swiper-container', {
            // loop:true,
            // autoplay: {
            // delay: 1500,
            // // stopOnLastSlide: false, 
            // disableOnInteraction: false,
            // },
            pagination: {
                el: '.swiper-pagination',
                // type: 'fraction',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });

    </script>
</body>

</html>